<template>
  <div class="Newsupply">
    <div class="detPgHeader">
      <div class="detPgHeaderleft">
        <span class="side_1"></span>
        <span class="add_1">{{ title }}</span>
      </div>
      <el-button type="info" icon="el-icon-back" onclick="window.history.go(-1)">返回</el-button>
    </div>
    <!-- ====================================================================== -->
    <!--  ========================基本信息======================== -->
    <!-- ====================================================================== -->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">基本信息</div>
      <el-form :model="DataDb" :inline="true" :rules="rules" ref="yanzheng" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="企业编号" prop="number">
          <el-input :disabled="canedit==false" v-model="DataDb.number"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input :disabled="canedit==false" v-model="DataDb.name"></el-input>
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input :disabled="canedit==false" v-model="DataDb.address"></el-input>
        </el-form-item>
        <el-form-item label="合作年限">
          <el-input :disabled="canedit==false" v-model="DataDb.hezuonianxian"></el-input>
        </el-form-item>
        <el-form-item label="合作状态">
          <el-select :disabled="canedit==false" v-model="DataDb.hezuo_status" style="width: 200px;">
            <el-option v-for="item in hezuolist" :key="item.value" :label="item.lable" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="lianxiren">
          <el-input :disabled="canedit==false" v-model="DataDb.lianxiren"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tPhone">
          <el-input :disabled="canedit==false" v-model="DataDb.phone"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-input :disabled="canedit==false" v-model="DataDb.zhiwu"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="overflow: hidden;">
      <div style="">
        <!-- ====================================================================== -->
        <!-- ===================--其他信息 =====================- -->
        <!-- ====================================================================== -->
        <div class="herd_tow_brgs" style="width: 45%;float: left;height:317px ">
          <div class="herd_tow_bt" style="margin-bottom:0;">
            <span>其他信息</span>
            <el-button v-show="canedit==true" type="primary" size="small" @click="opermess(true,'')">新增消息
            </el-button>
          </div>
          <el-table
            :data="messlist" :height="317" :max-height="240" stripe
            style="width: 98%;background-color:#fff;margin-left: 10px;">
            <el-table-column label="信息类型" align="center">
              <template slot-scope="scope">
                <el-input :disabled="canedit==false" v-model="scope.row.key" placeholder="信息类型"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="信息内容" align="center">
              <template slot-scope="scope">
                <el-input :disabled="canedit==false" v-model="scope.row.value" placeholder="信息内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="canedit==true">
              <template slot-scope="scope">
                <el-button :disabled="canedit==false" type="danger" icon="el-icon-delete"
                           @click="opermess(false,scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- ====================================================================== -->
        <!-- ================== 评价 ===========================-->
        <!-- ====================================================================== -->
        <div class="herd_tow_brgs" style="height: 317px">
          <div class="herd_tow_bt">评价</div>
          <div class="five_wbt" style="height:280px; margin: 20px; ">
            <el-input :disabled="canedit==false" :autosize="{ minRows: 9, maxRows: 9}" type="textarea"
                      placeholder="评价内容"
                      v-model="DataDb.evaluation"></el-input>
          </div>
        </div>
      </div>
      <div style="float: left;width: 60%;">
      </div>
    </div>
    <div class="Btn">
      <!--  ==============  确认  =============== 返回  =============== -->
      <div class="Botm_PtnRpo">
        <el-button @click="saveData('yanzheng')" v-if="canedit==true" type="primary">确认</el-button>
        <el-button class="bm_btn" onclick="window.history.go(-1)" type="info">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    let filterMobilePhone = (rule, value, callback) => {
      let reg = /^(1([38]\d|4[57]|5[0-35-9]|7[06-8])\d{8})(,(1([38]\d|4[57]|5[0-35-9]|7[06-8])\d{8}))*$/;
      if (this.DataDb.phone == '' || this.DataDb.phone == undefined || this.DataDb.phone == null) {
        callback();
      } else {
        if (reg.test(this.DataDb.phone)) {
          callback();
        } else {
          callback(new Error("请输入正确的电话号码"));
        }
      }
    };
    return {

      DataDb: {
        CreateOn: "2020-06-20",
        UpdateOn: "2020-06-20",
        status: 9,
        evaluation: "",
        lianxiren: "",
        zhiwu: "",
        phone: "",
        hezuo_status: "",
        hezuonianxian: "",
        number: "",
        name: "",
      },
      rules: {
        number: [{required: true, message: '请输入企业编号', trigger: 'change'}],
        name: [{required: true, message: '请输入企业名称', trigger: 'change'}],
        tPhone: [{validator: filterMobilePhone, trigger: 'change'}],
      },
      title: '新增供货商',
      hezuolist: [{value: 0, lable: '合作中'}, {value: 1, lable: '未合作'}],
      zhiwulist: ["未获取"],
      canedit: true,

      wuliaocatelist: [],//物料类别
      wuliaolist: [{cateid: '', selWuliao: {caizhi: '', jianhao: '', price: ''}, selWuliaolist: []}],//物料

      messlist: [{key: '', value: ''}],//qita其他信息
      orderlog: []
    };
  },
  created() {
    this.canedit = (this.$route.query.edit || null) == null;
    let id = this.$route.query.id || null
    if (id != null) {
      if (this.canedit == false) {
        this.title = "供货商详情"
      } else {
        this.title = "供货商编辑"
      }
      this.getData_Detail(id)
    }
  },
  methods: {
    getData_Detail: function (id) {
      axios("/JX_java/procurement/supplier/getSupplierDetais?supplierId=" + id).then(res => {
        let result = res.data.data;
        console.log(result, "后台数据")
        this.DataDb.number = result.enterpriseNumber;
        this.DataDb.name = result.enterpriseNumber;
        this.DataDb.address = result.enterpriseAdress;
        this.DataDb.hezuonianxian = result.hezuoYear;
        this.DataDb.hezuo_status = result.status

        this.DataDb.lianxiren = result.contacts
        this.DataDb.phone = result.contactsPhone
        this.DataDb.zhiwu = result.contactsJop
        this.DataDb.evaluation = result.appraise;
        let split = result.elseMessage.split("й");
        const _this = this;
        _this.messlist = [];
        split.forEach(e => {
          if (e != "") {
            let item = e.split("и");
            _this.messlist.push({
              key: item[0],
              value: item[1]
            })
          }
        })


      });
    },
    saveData(yanzheng) { //电子邮件 и  й
      let othermess = ""
      for (let i = 0; i < this.messlist.length; i++) {
        let temp = this.messlist[i]
        if (temp.key != '' || temp.value != '') {
          if (i == this.messlist.length - 1) {
            othermess += temp.key + 'и' + temp.value
          } else {
            othermess += temp.key + "и" + temp.value + "й"
          }
        }
      }
      this.DataDb.othermess = othermess;
      let temp_wuliaolist = [];
      let t_wuliaolist = this.wuliaolist;
      for (let i = 0; i < t_wuliaolist.length; i++) {
        if (t_wuliaolist[i].selWuliao.Id) {
          let iiii = t_wuliaolist[i].selWuliao;
          temp_wuliaolist.push({
            MaterialId: iiii.Id,
            CreateOn: '2020-08-08',
            Price: iiii.price,
          })
        }
      }
      const message = JSON.parse(localStorage.getItem("message"));
      let jsondata = {
        userId: message.id,//用户信息
        theobj: this.DataDb//
      };
      let jsondata_str = JSON.stringify(jsondata)
      console.log(jsondata_str, 666);
      const suppliDB = {
        "appraise": this.DataDb.evaluation,
        "contacts": this.DataDb.lianxiren,
        "contactsJop": this.DataDb.zhiwu,
        "contactsPhone": this.DataDb.phone,
        "createonTime": "",
        "elseMessage": othermess,
        "enterpriseAdress": this.DataDb.address,
        "enterpriseName": this.DataDb.name,
        "enterpriseNumber": this.DataDb.number,
        "hezuoYear": this.DataDb.hezuonianxian,
        "id": this.$route.query.id == null ? 0 : this.$route.query.id,
        "status": 0,
        "userId": message.Id,
        "userName": message.Name
      }
      this.$refs[yanzheng].validate((valid) => {
        if (valid) {
          axios.post("/JX_java/procurement/supplierGuanli/addSupplier", suppliDB).then(res => {
            console.log(res, "后台数据")
            let result = res.data
            if (result.error == "Success") {
              this.$message.success(result.data);
            } else {
              this.$message.error(result.data);
            }
            if (result.data == "操作成功") {
              window.history.go(-1);
            }
          });
        } else {
          this.$message.error('请按要求填写');
          return false;
        }
      })
    },
    getData(index, jsondata, result) {
      let jsondata_str = JSON.stringify(jsondata)
      axios("/apis/ScSaiGouMamage.asmx/getData?index=" + index + "&jsondata=" + jsondata_str).then(({data}) => {
        var datas = this.$x2js.xml2js(data);
        this[result] = JSON.parse(datas.string.__text);
      });
    },
    //其他信息
    opermess(mark, index) {
      if (mark == true) {
        this.messlist.push({key: '', value: ''});
      } else {
        this.messlist.splice(index, 1);
      }
    },
    /*物料*/
    operwuliao(mark, index) {
      if (mark == true) {
        this.wuliaolist.push({cateid: '', selWuliao: {caizhi: '', jianhao: '', price: ''}, selWuliaolist: []})
      } else {
        this.wuliaolist.splice(index, 1)
      }
    },
    changeByku(id, inde, suoyin) {
      if (inde == 1) {
        let jsondata = {id: id}
        axios("/apis/ScSaiGouMamage.asmx/getData?index=" + 2 + "&jsondata=" + JSON.stringify(jsondata)).then(({data}) => {
          var datas = this.$x2js.xml2js(data);
          var steelist = JSON.parse(datas.string.__text);
          this.wuliaolist[suoyin].selWuliao = {caizhi: '', jianhao: '', price: ''}
          this.wuliaolist[suoyin].selWuliaolist = steelist
          this.$forceUpdate()
        });
      }
    },
    ValidateNumber(name, object, type) {
      if (!/^\d+[.]?\d*$/.test(object[name])) {
        object[name] = /^\d+[.]?\d*!/.exec(object[name]);
      }
      return false;
    },
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Newsupply {
  border-top: 1px solid transparent;
  animation: fade-in; /*动画名称*/
  animation-duration: 0.4s; /*动画持续时间*/
  -webkit-animation: fade-in 0.4s; /*针对webkit内核*/
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in { /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Newsupply .detPgHeader {
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}

.Newsupply .detPgHeader .side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  display: inline-block;
}

.Newsupply .detPgHeader .add_1 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 400;
}

.Newsupply .herd_tow_brgs {
  background-color: $white;
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid $bordercolor;
  border-radius: 5px;
}

.Newsupply .herd_tow_bt {
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 20px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Newsupply .Botm_PtnRpo {
  margin: 20px;
  text-align: center;
  padding: 20px;
  background: white
}

/deep/ .five_wbt {
  .el-textarea__inner {
    font-family: "微软雅黑";
  }
}

</style>
